import QtQuick 2.0
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.3
import Qt.labs.calendar 1.0


ApplicationWindow {
    // visibile must set to true - default is false
    visible: true

    width: 800
    height: 800

    Image{
        id: image
        fillMode: Image.PreserveAspectCrop; anchors.fill: parent;
        //        source: "2.png"
        source: "https://gitee.com/ch593030323/lu-xue-qi-image-exhibition/raw/master/favorite/4.png"

//        onProgressChanged: {
//            console.log("加载进度:", progress * 100, "%")
//        }
//        onStatusChanged: {
//            console.log(image.Ready ? "ready" : "loading")
//        }
    }

    ScrollView{
        anchors.fill:parent
        ScrollBar.horizontal.interactive: false//false :鼠标无法拖动滚动条
        ScrollBar.vertical.interactive: false

        GridLayout{
            columns: 2
            RowLayout{Label{Layout.minimumWidth:120; text:"Menu:"}
                Button {
                    id:button
                    onClicked: menu.open()
                    property var list : uiconfig.availableStyles()
                    text: uiconfig.currentStyle()
                    Menu {
                        id: menu
                        //通过循环添加style
                        Repeater {
                            model: button.list.length
                            delegate: MenuItem {
                                text: button.list[index]
                                onTriggered: {button.text = text; uiconfig.slotUpdateStyle(text)}

                            }
                        }
                    }
                }
            }

            RowLayout{Label{Layout.minimumWidth:120; text:"Label:"} Label {text:"123\n456"}}
            RowLayout{Label{Layout.minimumWidth:120; text:"Dial:"} Dial {}}
            RowLayout{Label{Layout.minimumWidth:120; text:"TextInput:"} TextInput {text:"123\n456"}}
            RowLayout{Label{Layout.minimumWidth:120; text:"TextArea:"} TextArea {text:"123\n456"}}
            RowLayout{Label{Layout.minimumWidth:120; text:"TextField:"} TextField {text:"123456"}}
            RowLayout{Label{Layout.minimumWidth:120; text:"SpinBox:"} SpinBox {}}
            RowLayout{Label{Layout.minimumWidth:120; text:"Slider:"} Slider {value:0.5}}
            RowLayout{Label{Layout.minimumWidth:120; text:"ProgressBar:"} ProgressBar {indeterminate: true;}}
            RowLayout{Label{Layout.minimumWidth:120; text: "image loading(" + (image.progress * 100).toFixed(2) + "%)" } ProgressBar {id: imageProgress; value: image.progress;}}
            RowLayout{Label{Layout.minimumWidth:120; text:"Button:"} Button {}}
            RowLayout{Label{Layout.minimumWidth:120; text:"BusyIndicator:"} BusyIndicator {}}
            RowLayout{Label{Layout.minimumWidth:120; text:"ToolButton:"} ToolButton {text:"123456"}}
            RowLayout{Label{Layout.minimumWidth:120; text:"ToolBar:"} ToolBar{RowLayout {ToolButton {text:"1"}ToolButton {text:"2"} ToolButton {text:"3"}}}}
            RowLayout{Label{Layout.minimumWidth:120; text:"Switch:"} Switch {checked: true}}
            RowLayout{Label{Layout.minimumWidth:120; text:"RadioButton:"} RadioButton {checked: true}}
            RowLayout{Label{Layout.minimumWidth:120; text:"CheckBox:"} CheckBox {checked: true}}
            RowLayout{Label{Layout.minimumWidth:120; text:"ComboBox:"} ComboBox {model: [ "Banana", "Apple", "Coconut" ]}}
            RowLayout{Label{Layout.minimumWidth:120; text:"GroupBox:"} GroupBox{title:"GroupBox"; Row{CheckBox{text:"CheckBox"} CheckBox{text:"CheckBox"}}}}
            //        RowLayout{Text{text:"Calendar"} Calendar{}}
            //        RowLayout{Text{text:"TableView"} TableView {}}
            //            RowLayout{Text{text:"TabView"} TabView{Tab{title: "red"}Tab{title: "Blue"}Tab{title: "Green"}}}
            RowLayout{Label{Layout.minimumWidth:120; text:"ListView:"} ListView{height: 120; model:3; delegate: ItemDelegate {text: "Item " + index}}}

        }
    }
}
